import { Box, Flex, HStack, Stack } from "@chakra-ui/react";
import { FC, memo, useEffect, useState } from "react";
import { abcData, type } from "@/data/artist-abc";
import { Text,Image,Button } from "@chakra-ui/react";
import { generateUserArtists } from "@/faker/user/user";
import { IUserArtist } from "@/faker/user/user";
import Pagination from "@/components/Pagination";
import TextButton from "@/components/TextButton";
import { useAppDispatch, useAppSelector } from "@/hooks/store";
import { fetchRecommendArtists } from "@/store/modules/recommend";

const Artist: FC = () => {
    const [currentTypeIndex, setCurrentTypeIndex] = useState(0);
    const [currentAbcIndex, setCurrentAbcIndex] = useState(0);
    // const [artists, setArtists] = useState<IUserArtist[]>([]);
    const {artists} = useAppSelector(state=>state.recommend)
    const [currentArtists, setCurrentArtists] = useState<IUserArtist[]>([]);

    // const dispatch = useAppDispatch()

    // useEffect(()=>{
    //     dispatch(fetchRecommendArtists())
    // },[])
    // 更新过滤逻辑
    const filterArtists = () => {
        let filtered = [...artists];
        
        // 按首字母过滤
        if (currentAbcIndex !== 0) { // 假设索引0是"全部"
            filtered = filtered.filter(artist => 
                artist.name.startsWith(abcData[currentAbcIndex])
            );
        }
        
        // 按类型过滤
        const selectedType = type[currentTypeIndex];
        if (currentTypeIndex !== 0) {
            filtered = filtered.filter(
                artist => artist.category.includes(selectedType)
            );
        }
        
        setCurrentArtists(filtered);
    };

    // 更新选择处理函数
    const changeAbcIndex = (index: number) => {
        setCurrentAbcIndex(index);
        filterArtists();
    };

    const changeTypeIndex = (index: number) => {
        setCurrentTypeIndex(index);
        filterArtists();
    };


    // 当过滤条件改变时重新过滤
    useEffect(() => {
        filterArtists();
    }, [currentAbcIndex, currentTypeIndex, artists]);

    return (
        <Flex gap={4} flexDirection="column" >
            <Flex justifyContent="space-between"  >
                {abcData.map((item, index) => (
                    <TextButton 
                        onClick={() => changeAbcIndex(index)}
                        key={item}
                        text={item}
                        isActive={currentAbcIndex === index}
                    />
                ))}
            </Flex>
            <Flex justifyContent="start">
                {type.map((item, index) => (
                    <TextButton
                        key={item}
                        text={item}
                        isActive={currentTypeIndex === index}
                        onClick={() => changeTypeIndex(index)}
                    />
                ))}
            </Flex>
            <Flex flexWrap="wrap" gap={4} mt={10} justifyContent="start">
                {currentArtists.slice(0, 12).map((artist) => (
                    <Stack 
                        key={artist.id} 
                        textAlign="center" 
                        borderRadius={50} 
                        mb={10}
                        flexBasis="calc(16.666% - 16px)"
                        minWidth="150px"
                    >
                        <Box w="100%" position="relative" paddingBottom="100%">
                            <Image 
                                src={artist.avatar} 
                                alt={artist.name} 
                                position="absolute"
                                top={0}
                                left={0}
                                w="100%"
                                h="100%"
                                borderRadius="50%" 
                                objectFit="cover"
                            />
                        </Box>
                        <Text>{artist.name}</Text>
                    </Stack>
                ))}
            </Flex>
            <Flex flexWrap="wrap" gap={4} justifyContent="start">
                {currentArtists.slice(12).map((artist) => (
                    <HStack 
                        key={artist.id} 
                        textAlign="center" 
                        borderRadius={50} 
                        mb={10}
                        flexBasis="calc(16.666% - 16px)"
                        minWidth="150px"
                    >
                        <Box w="50px" position="relative" paddingBottom="50px">
                            <Image 
                                src={artist.avatar} 
                                alt={artist.name}
                                position="absolute"
                                top={0}
                                left={0}
                                w="100%"
                                h="100%"
                                borderRadius="50%" 
                                objectFit="cover"
                            />
                        </Box>
                        <Text>{artist.name}</Text>
                    </HStack>
                ))}
            </Flex>
            <Pagination totalPages={10} onPageChange={() => {}} />
        </Flex>
    );
};

export default memo(Artist);
